<template>
	<div class="test-wrap">{{data.componentName}}</div>
</template>

<script lang="ts">
	import { Component, Vue, Prop } from "vue-property-decorator"
	import { Getter, Action, State } from 'vuex-class'
	import { TestData } from '@/types/components/test.interface'
	// import {  } from "@/components" // 组件

	@Component({
		components: {
		}
	})
	export default class About extends Vue {

		// vuex映射
		@State login: boolean	// state 映射到 computed中
		@Action initAjax: () => void  // action 映射到methods中
		@Getter load: boolean // getters映射到computed中

		// prop
		@Prop({
			required: false,
			default: ''
		}) name!: string

		// data
		data: TestData = {
			componentName: 'test'
		}

		constructor() {
			super();
			this.login = true;
			this.initAjax = () => {
				//
			};
			this.load = false;
		}

		// 计算属性
		get computedData() {
			return 'computed:' + this.data.componentName
		}

		play() {
			// 普通函数
		}

		created() {
			//
		}

		activated() {
			//
		}

		mounted() {
			//
		}

	}
</script>

<style lang="scss">
	@import "@/assets/scss/variables.scss";

	.test-wrap {
		width: 100%;
	}
</style>

